<template>
  <el-drawer
    :title="translate('orderDetail')"
    :visible.sync="isShow"
    :wrapper-closable="!modalDialog"
    size="1000px"
  >
    <div class="property-title">{{ translate("orderinfo") }}</div>
    <div class="df_ac">
      <div class="item" style="width: 66.66%">
        <span class="key">{{ translate("orderNum") }}：</span>
        <span class="value">{{ detail.orderId || detail.id }}</span>
      </div>
      <div class="item">
        <span class="key">{{ translate("orderStatus") }}：</span>
        <span>{{ detail.statusName }}</span>
      </div>
      <div class="item">
        <span class="key">{{ translate("createTime") }}：</span>
        <span class="value">{{ detail.createDate }}</span>
      </div>
      <div class="item">
        <span class="key">{{ translate("payTime") }}：</span>
        <span class="value">{{ detail.payDate || "-" }}</span>
      </div>
      <div class="item">
        <span class="key">{{ translate("orderPrice") }}：</span>
        <span class="value">{{ detail.money }}{{ translate("integral") }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">{{ translate("buyerInfo") }}</div>
    <div class="df_ac mt20">
      <div>
        <span class="key">{{ translate("name") }}：</span>
        <span class="value">{{ detail.buyer.memberName || "-" }}</span>
      </div>
      <div>
        <span class="key">{{ translate("contactPhone") }}：</span>
        <span class="value">{{ detail.buyer.phone || "-" }}</span>
      </div>
      <div>
        <span class="key">{{ translate("memberIdCard") }}：</span>
        <span class="value">{{ detail.buyer.memberCardNo || "-" }}</span>
      </div>
    </div>
    <template v-if="detail.ztObj && detail.ztObj.pickUpAddress">
      <div class="line-style mb20" />
      <div class="property-title">{{ translate("pickSelfInfo") }}</div>
      <div class="df_ac mt20">
        <div>
          <span class="key">{{ translate("claimCode") }}：</span>
          <span class="value">{{ detail.ztObj.claimCode || "-" }}</span>
        </div>
        <div>
          <span class="key">{{ translate("operator") }}：</span>
          <span class="value">{{ detail.ztObj.operator || "-" }}</span>
        </div>
        <div>
          <span class="key">{{ translate("pickAddr") }}：</span>
          <span class="value">{{ detail.ztObj.pickUpAddress || "-" }}</span>
        </div>
        <div>
          <span class="key">{{ translate("pickTime") }}：</span>
          <span class="value">{{ detail.ztObj.pickUpTime || "-" }}</span>
        </div>
      </div>
    </template>
    <template v-if="detail.kdObj && detail.kdObj.receiverAddress">
      <div class="line-style mb20" />
      <div class="property-title">{{ translate("expressInfo") }}</div>
      <div class="df_ac mt20">
        <div>
          <span class="key">{{ translate("consignee") }}：</span>
          <span class="value">{{ detail.kdObj.receiverName || "-" }}</span>
        </div>
        <div>
          <span class="key">{{ translate("contactPhone") }}：</span>
          <span class="value">{{ detail.kdObj.receiverPhone || "-" }}</span>
        </div>
        <div>
          <span class="key">{{ translate("gatherAddr") }}：</span>
          <span class="value">{{ detail.kdObj.receiverAddress || "-" }}</span>
        </div>
        <div>
          <span class="key">{{ translate("deliverCompany") }}：</span>
          <span class="value">{{ detail.kdObj.kdCompany || "-" }}</span>
        </div>
        <div>
          <span class="key">{{ translate("trackingNumber") }}：</span>
          <span class="value">{{ detail.kdObj.kdNo || "-" }}</span>
        </div>
        <div>
          <span class="key">{{ translate("deliveryTime") }}：</span>
          <span class="value">{{ detail.kdObj.sendTime || "-" }}</span>
        </div>
      </div>
    </template>
    <div class="property-title">{{ translate("goodsInfo") }}</div>
    <el-table
      :data="detail.goodsList"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="translate('goodsName')"
        prop="goodsName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('num')"
        prop="num"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('exchangeIntegral')"
        prop="integral"
        min-width="100"
        show-overflow-tooltip
      />
    </el-table>
  </el-drawer>
</template>

<script>
import store from '@/store'
import { integralOrderDetail } from '@/api'
export default {
  data() {
    return {
      isShow: false,
      detail: {},
      modalDialog: store.getters.dialog
    }
  },
  methods: {
    getOrderDetail(id) {
      this.detail = {}
      integralOrderDetail({ param: { id } }).then(res => {
        if (res.errorCode === '000000') {
          this.detail = { ...res.record }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.df_ac {
  flex-wrap: wrap;
  div {
    width: 33.33%;
    margin-bottom: 20px;
    .key {
      color: #666666;
      display: inline-block;
      // width: 90px;
      // text-align: right;
    }
    .value {
      color: #222;
    }
  }
}
.bottom_wrap {
  margin-top: 30px;
  text-align: right;
  .line {
    margin-bottom: 10px;
  }
}
</style>
